<template>
	<view class="page">
		<view class="statistics">
			<image src="https://www.retoc.xyz/icon/left.png" class="left" @click="changeCar(1)"></image>
			<image src="https://www.retoc.xyz/icon/right.png" class="right" @click="changeCar(-1)"></image>
			
			<image :src="carphoto" mode="widthFix" class="big-icon"></image>
			<view class="report-title">
				<text class="days">{{brand}}</text>
				<text class="unit">{{desc}}</text>
			</view>
			<view class="sub-title">
				<text>{{carname}}</text>
			</view>
			<view class="report">
				<view class="column red">
					<text class="column-title">已经预订</text>
					<text class="number">{{sum_1}}</text>
				</view>
				<view class="column green">
					<text class="column-title">本月空闲</text>
					<text class="number">{{sum_2}}</text>
				</view>
			</view>
		</view>
		<view class="calendar-container">
			<uni-calendar :insert="true" :lunar="false" :selected="list" @monthSwitch="changeDate" @confirm="changeDate"></uni-calendar>
		</view>
	</view>
</template>

<script>
	import uniCalendar from '@/components/uni-calendar/uni-calendar.vue';
	export default {
		components: {
			uniCalendar
		},
		data() {
			return {
				list: [],
				year:0,
				month:0,
				sum_1: 0,
				sum_2: 0,
				sum_3: 0,
				brand:"",
				carname:"",
				desc:"",
				carphoto:"",
				carId:1,
				typeArray: [],
				typeIndex: 0,
			};
		},
		onShow:function(){
			let that=this
			let date=new Date()
			that.year=date.getFullYear()
			that.month=date.getMonth()+1
			that.ajax(that.url.searchCar, 'GET', null , function(resp) {
				let result = resp.data.result;
				console.log("CAR",result);
				that.typeArray=result
				that.carId=result[that.typeIndex].id
			});
			that.searchCheckin(that,that.year,that.month)
		},
		methods: {
			searchCheckin:function(ref,year,month){
				let that=ref
				that.sum_1=0
				that.sum_2=0
				that.list.length=0
				that.ajax(that.url.carUseInfo,"POST",{year:year,month:month,carId:that.carId},function(resp){
					console.log('result',resp.data);
					that.brand=resp.data.car.brand;
					that.carname=resp.data.car.name;
					that.desc=resp.data.car.description;
					that.carphoto=resp.data.car.photo;
					for(let one of resp.data.result){
						if(one.type!=null&&one.type!=""){
							let color=""
							if(one.type=="未用"){
								color="green"
							}else if(one.type=="已用"){
								color="red"
							}
							that.list.push({
								date:one.date,
								info:one.type,
								color:color
							})
						}
					}
					that.sum_1=resp.data.info.used
					that.sum_2=resp.data.info.unused
				})
			},
			changeDate:function(e){
				let that=this
				let year=e.year
				let month=e.month
				console.log("year:",year, ",month:",month);
				that.searchCheckin(that,year,month)
			},
			changeCar(i){
				let that=this
				that.typeIndex+=i;
				if(that.typeIndex>=that.typeArray.length){
					that.typeIndex=0
				}
				if(that.typeIndex<0){
					that.typeIndex=that.typeArray.length-1
				}
				that.carId=that.typeArray[that.typeIndex].id
				that.searchCheckin(that,that.year,that.month)
			}
		}
	};
</script>

<style lang="less">
	@import url(car_info.less);
</style>
